<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DockerFly</title>
</head>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<link rel="stylesheet" href="css/uikit/uikit.css"/>
<script src="js/common/jquery.min.js"></script>
<script src="js/common/vue.min.js"></script>
<script src="js/common/uikit.js"></script>

<link rel="stylesheet" href="css/main.css"/>
<script lang="javascript" src="js/utils.js"></script>
<script lang="javascript">
    doImport("org.voovan.docker.command.Image.CmdHubImageInfo")
    doImport("org.voovan.docker.command.Image.CmdImageList")
    doImport("org.voovan.docker.command.Image.CmdImageRemove")
    doImport("org.voovan.docker.command.Image.CmdImageCreate")
    doImport("org.voovan.docker.command.Image.CmdImageTag")

    function init() {
        imageListVue = new Vue({
            el: '#imageApp',
            data: {
                imageList: null,
                hubImageList: null,
                pullTag:"latest",
                queryParams:{
                    name:""
                },
                searchParams:{
                    name:"",
                    limit:5
                }
            },
            methods: {
                //查询方法
                query: function () {
                    try {
                        var cmdImageList = new CmdImageList();
                        cmdImageList.connect();
//                        cmdImageList.all(true);

                        if(this.queryParams.name!=""){
                            cmdImageList.filter(this.queryParams.name);
                        }

                        this.imageList = cmdImageList.send().sortBy("Created");
                        cmdImageList.close();
                        cmdImageList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },
                //移除方法
                remove: function (image) {
                    name = image.repoTags.length > 0 ? image.repoTags[0] : "";
                    UIkit.modal.confirm("Are you sure to remove <span class='uk-text-danger'>" + name + "</span> ?", function () {
                        try {
                            var cmdImageRemove = new CmdImageRemove(shortDockerId(image.id, 12));
                            cmdImageRemove.connect();
                            cmdImageRemove.send();
                            cmdImageRemove.close();
                            cmdImageRemove.release();
                            imageListVue.query();
                        } catch (e) {
                            alertError(e)
                        }
                    });


                },
                //重命名
                tag: function (image) {
                    name = image.repoTags.length > 0 ? image.repoTags[0] : "";
                    id = image.id
                    UIkit.modal.prompt("Images tags: (like repo:tag)", name, function(newvalue){
                        try {
                            if(newvalue!=""){
                                var reppAndTag = newvalue.split(":");
                                var cCmdImageTag = new CmdImageTag(shortDockerId(image.id,12));
                                cCmdImageTag.connect();
                                cCmdImageTag.repo(reppAndTag[0])
                                cCmdImageTag.tag(reppAndTag[1])
                                cCmdImageTag.send();
                                cCmdImageTag.close();
                                cCmdImageTag.release();
                            }

                        } catch (e) {
                            alertError(e)
                        }
                    });


                },
                search: function () {
                    try {
                        if (this.searchParams.name == "") {
                            return
                        }
                        var cmdHubImageInfo = new CmdHubImageInfo();
                        cmdHubImageInfo.connect();
                        cmdHubImageInfo.term(this.searchParams.name);
                        cmdHubImageInfo.limit(this.searchParams.limit);
                        this.hubImageList = cmdHubImageInfo.send().sortBy("star_count", true);
                        cmdHubImageInfo.close();
                        cmdHubImageInfo.release();
                    } catch (e) {
                        alertError(e)
                    }
                },
                openPullDialog: function(){
                    pullImageDialog = UIkit.modal("#pullImageDialog");
                    pullImageDialog.show();
                },
                pull: function (hubImage) {
                    try {
                        this.pullTag = "latest";
                        UIkit.modal.prompt("Pull an image with tag:", this.pullTag, function(newvalue) {
                            this.pullTag = newvalue;
                            var cmdImageCreate = new CmdImageCreate();
                            cmdImageCreate.connect();
                            cmdImageCreate.fromImage(hubImage.name);
                            cmdImageCreate.tag(this.pullTag);

                            cmdImageCreate.send();
                            cmdImageCreate.close();

                            hubImageList.hide();
                            alert("Image " + hubImage.name + " already pulled.");
                            imageListVue.query();
                        })

                    } catch (e) {
                        alertError(e)
                    }

                }
            }
        });

        imageListVue.query()
    }
</script>
<body onload="init()" class="frameBody">
<div id="imageApp" class="uk-grid" style="display: none" v-show="this.imageList!=null">
    <div class="uk-width-6-6">
        <div class="uk-panel"></div>
        <h3 class="uk-text-middle">Image manager</h3>
        <div class="uk-panel uk-panel-box uk-text-bold">
            <div class="uk-grid">
                <div class="uk-width-5-6 uk-form">
                    <span class="mr5">Name:</span>
                    <input class="uk-form-width-medium"
                           type="text" placeholder="image's name" v-model="queryParams.name"/>
                    <a class="uk-button uk-button-small" @click="query()"><i class="uk-icon-search"></i></a>
                </div>
                <div class="uk-width-1-6 uk-text-right">
                    <a class="uk-button uk-button-small uk-button-primary"
                       @click="openPullDialog"><i class="uk-icon-plus-square"></i> </a>
                </div>
            </div>
        </div>
        <table id="imageList" class="uk-table uk-overflow-container uk-panel-box">
            <caption>Image list</caption>
            <thead>
            <tr>
                <th class="uk-text-center uk-width-1-10">NO.</th>
                <th class="uk-width-3-10">Name</th>
                <th class="uk-width-1-10">ID</th>
                <th class="uk-text-center uk-width-2-10">Created</th>
                <th class="uk-width-1-10">Size(Mb)</th>
                <th class="uk-text-center">Operation</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="(image,index) in imageList">
                <td class="uk-text-center uk-text-middle uk-text-small">{{index+1}}</td>
                <td class="uk-text-bold uk-text-middle uk-text-primary">
                    <div v-if="image.repoTags.length!=0" v-for="repoTag,index in image.repoTags">
                        {{repoTag}}
                    </div>
                    <div v-if="image.repoTags.length == 0" v-for="repoDigest,index in image.repoDigests">
                        {{repoDigest.split("@")[0]}}
                    </div>
                </td>
                <td class="uk-text-bold uk-text-middle uk-text-success">{{image.id|shortDockerId(12)}}</td>
                <td class="uk-text-center">{{new Date(parseInt(image.created*1000)).format("yyyy-MM-dd hh:mm:ss")}}</td>
                <td class="uk-text-bold uk-text-middle uk-text-danger">{{(parseInt(image.size)/1024/1024).toFixed(2)}}</td>
                <td class="uk-text-center uk-text-middle">
                    <input class="uk-button uk-button-small uk-button-primary" type="button" value="Tag"
                           @click="rename(image)"/>
                    <input class="uk-button uk-button-small uk-button-danger" type="button" value="Remove"
                           @click="remove(image)"/>
                </td>

            </tr>
            </tbody>
        </table>

    </div>

    <div id="pullImageDialog" class="uk-modal">
        <div class="uk-modal-dialog uk-modal-dialog-large   uk-overflow-container">
            <a href="#" class="uk-modal-close uk-close uk-close-alt"></a>
            <h3 class="uk-text-middle">Pull image</h3>
            <div class="uk-panel uk-panel-box uk-text-bold">
                <div class="uk-grid">
                    <div class="uk-width-5-6 uk-form">
                        <span class="mr5">Name:</span>
                        <input class="uk-form-width-medium"
                               type="text" placeholder="image's name" v-model="searchParams.name"/>
                        <select v-model="searchParams.limit">
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                            <option value="50">50</option>
                        </select>
                        <a class="uk-button uk-button-small" @click="search()"><i class="uk-icon-search"></i></a>
                    </div>
                </div>
            </div>

            <table id="hubImageList" class="uk-table uk-overflow-container uk-panel-box">
                <caption>Image list</caption>
                <thead>
                <tr>
                    <th class="uk-text-center uk-width-1-10">NO.</th>
                    <th class="uk-width-1-10">Name</th>
                    <th class="uk-width-1-10">Star</th>
                    <th class="uk-text-center uk-width-1-10">Official</th>
                    <th class="uk-width-4-10">description</th>
                    <th class="uk-text-center">Operation</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(hubImage,index) in hubImageList " :key='hubImage.star_count'>
                    <td class="uk-text-center uk-text-middle uk-text-small">{{index+1}}</td>
                    <td class="uk-text-bold uk-text-middle uk-text-primary">
                        {{hubImage.name}}
                    </td>
                    <td class="uk-text-bold uk-text-middle uk-text-success">{{hubImage.star_count}}</td>
                    <td class="uk-text-center">{{hubImage.is_official}}</td>
                    <td>{{hubImage.description}}</td>
                    <td class="uk-text-center uk-text-middle">
                        <input class="uk-button uk-button-small uk-button-primary" type="button" value="Pull"
                               @click="pull(hubImage)"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="uk-width-6-6">
        <div style="min-height:40px; margin-bottom:10px" class="uk-text-center">
            <div><img height="27" width="120" src="img/logo.png"/></div>
            <div>CopyRight <span class="uk-icon-copyright"></span> Voovan Vsetful</div>
            <div>Powered by Voovan open source framework.</div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>